<template>
    <div>
        <el-tree ref="treeRef" :data="authList" :check-strictly="true" show-checkbox :default-checked-keys="checkedNode" node-key="roleId" :props="{ label: 'name', children: 'roleList' }" />
        <el-button type="primary" @click="onChangeAuth">修改权限</el-button>
    </div>
</template>
<script lang="ts" setup>
import { getAuthList } from '@/api/auth'
import { IAuth } from '@/types/auth'
const route = useRoute()
const treeRef = ref<any>(null)
let authList = ref<IAuth[]>([])
const checkedNode = ref<(number | string)[]>([])
const { query } = route
if (query.auth) {
    checkedNode.value = query.auth as (number | string)[]
}
onMounted(async () => {
    authList.value = await getAuthList()
})
const onChangeAuth = () => {
    const selectedTreeNode = treeRef.value.getCheckedNodes()
    console.log('🚀 ~ onChangeAuth ~ selectedTreeNode:', selectedTreeNode)
}
</script>
